<style scoped>
.layui-col-lg4 {
    width: 100%;
    text-align: right;
}
</style>
<template>
<div class="company">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加分配信息</a>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">客户经理</li>
            <li>渠道客户</li>
        </ul>
        <div class="layui-tab-content" style="height:auto;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form">
                    <div class="layui-col-lg4 select-item">
                        <!--		                <div class="layui-inline">-->
                        <!--		                    <select class="layui-form-select" name="departid" lay-filter="departid" lay-search>-->
                        <!--		                        <option value="">请选择部门</option>-->
                        <!--		                        <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                        <!--		                    </select>-->
                        <!--		                </div>-->

                        <div class="layui-inline" style="width: 220px">
                            <select name="sellerid" id="sellerid" lay-filter="sellerid" class="layui-form-select" lay-search>
                                <option value="">请选择客户经理</option>
                                <option v-for="(item, index) in users" :key="item.guid" :value="item.guid">{{item.realname}} ({{item.telphone}})</option>
                            </select>
                        </div>

                        <div class="layui-inline">
                            <select class="layui-form-select" name="customerid" lay-filter="customerid" lay-search>
                                <option value="">请选择客户</option>
                                <option v-for="(item, index) in customers" :key="item.guid" :value="item.guid">{{item.name}}</option>
                            </select>
                        </div>
                        <button type="button" class="layui-btn sou" @click="searchkehu">搜索</button>
                    </div>
                </form>
                <table class="layui-table layui-form">
                    <thead>
                        <tr>
                            <th>客户经理</th>
                            <th>客户</th>
                            <th>商务人员</th>
                            <th>商务人员电话</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="id9" v-for="(val, index) in kehu" :key="val.guid">
                            <td>{{val.sellPerName}}</td>
                            <td>{{val.customername}}</td>
                            <td>{{val.sellPerName}}</td>
                            <td>{{val.sellTelPhone}}</td>
                            <td>{{val.opertorname}}</td>
                            <td>{{val.createtime}}</td>
                            <td><a href="javascript:;" @click="doDel(val.guid)">删除</a></td>
                        </tr>
                    </tbody>
                </table>
                <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form">
                    <div class="layui-col-lg4 select-item">
                        <div class="layui-inline">
                            <select class="layui-form-select" name="departid" lay-filter="departid" lay-search>
                                <option value="">请选择部门</option>
                                <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>
                            </select>
                        </div>

                        <!--		                    <div class="layui-inline" style="width: 220px">-->
                        <!--		                        <select name="sellerid" id="sellerid" lay-filter="sellerid" class="layui-form-select" lay-search lay-verify="required" >-->
                        <!--		                            <option value="">请选择客户经理</option>-->
                        <!--		                            <option v-for="(item, index) in users" :key="item.guid" :value="item.guid">{{item.realname}} ({{item.telphone}})</option>-->
                        <!--		                        </select>-->
                        <!--		                    </div>-->

                        <div class="layui-inline">
                            <select class="layui-form-select" name="customeridq" lay-filter="customeridq" lay-search>
                                <option value="">请选择客户</option>
                                <option v-for="(item, index) in customers" :key="item.guid" :value="item.guid">{{item.name}}</option>
                            </select>
                        </div>
                        <button type="button" class="layui-btn sou" @click="searchqudao">搜索</button>
                    </div>
                </form>
                <table class="layui-table layui-form">
                    <thead>
                        <tr>
                            <th>渠道</th>
                            <th>客户</th>
                            <th>商务人员</th>
                            <th>商务人员电话</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="id9" v-for="(val, index) in qudao" :key="val.guid">
                            <td>{{val.departmentname}}</td>
                            <td>{{val.customername}}</td>
                            <td>{{val.sellPerName}}</td>
                            <td>{{val.sellTelPhone}}</td>
                            <td>{{val.opertorname}}</td>
                            <td>{{val.createtime}}</td>
                            <td><a href="javascript:;" @click="del(val.guid)">删除</a></td>
                        </tr>
                    </tbody>
                </table>
                <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
            </div>

        </div>
    </div>
</div>

<!--

-->
</template>

<script>
import Pagination from '../common/Pagination.vue'
let qs = require('qs');

export default {
    name: 'AssignList',
    components: {
        Pagination
    },
    data() {
        return {
            customers: [],
            clients: [],
            customerid: '',
            customeridq: '',
            departments: [],
            departid: '',
            currentPage: 1,
            totalPage: 0,
            users: [],
            sellerid: '',
            qudao: [],
            kehu: {}
        }
    },
    mounted() {
        let that = this;
        this.getDeparts();
        this.getCustomer();
        this.getUserAll();
        layui.use(['form', 'element'], function () {
            var element = layui.element;
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.getPageQudaoData();

            form.on('select', function (data) {
                that[data.elem.name] = data.elem.value;
            })
        });

    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    methods: {
        getDeparts: function () {
            this.$post('/sales/Department!listAll.action', qs.stringify({
                    type: 1
                }))
                .then(response => {
                    let data = response.data;
                    if (data.info != 'error') {
                        this.departments = data.info;
                    } else {
                        this.toast('获取部门数据失败！');
                    }
                })
        },
        getCustomer: function () {
            this.$post('/sales/Sellform!findCustomer.action')
                .then(response => {
                    let data = response.data;
                    if (data.status == 'true') {
                        this.customers = data.result;
                    } else {
                        this.toast('获取客户数据失败！');
                    }
                })
        },
        /**
         * 2020-3-30
         * Liukx
         * 关联销售人员与客户
         */
        getUserAll: function () {
            // this.$post('/system/Tuser!getUserAll.action')
            //     .then(response => {
            //         let data = response.data;
            //         this.users = data.info;
            //
            //     })
            this.$post('/system/Tuser!findUserBygroup.action')
                .then(response => {
                    let data = response.data;
                    this.users = data.msg;

                })
        },
        searchkehu: function () {
            this.getPageData('searchkehu');
        },
        searchqudao: function () {
            this.getPageQudaoData('searchqudao');
        },
        turnPage: function (data) {
            this.currentPage = data;

            this.getPageData();
            this.getPageQudaoData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'searchkehu') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            postData.customerid = that.customerid;
            //postData.departid = that.departid;
            postData.sellerid = that.sellerid;
            postData.type = "2";
            $.ajax({
                url: '/sales/Customerdepartgroup!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.flag == 'success') {
                        //分页数据赋值
                        that.currentPage = res.result.indexPage;
                        that.totalPage = res.result.pageCount;

                        that.kehu = res.result.rows;
                    } else if (res.flag == 'false') {
                        that.alert(res.result);
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        getPageQudaoData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'searchqudao') {
                postData.page = that.currentPage;
            }
            postData.customerid = that.customeridq;
            postData.departid = that.departid;
            // postData.sellerid = that.sellerid;
            postData.type = "1";
            console.log(postData)
            $.ajax({
                url: '/sales/Customerdepartgroup!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.flag == 'success') {
                        //分页数据赋值
                        // that.currentPage = res.result.indexPage;
                        that.totalPage = res.result.pageCount;

                        that.qudao = res.result.rows;
                    } else if (res.flag == 'false') {
                        that.alert(res.result);
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('AssignAdd');
        },
        del: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Customerdepartgroup!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.flag == "success") {
                            that.toast(res.result);
                            that.getPageQudaoData();
                        } else if (res.flag = 'false') {
                            that.toast(res.result);
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });

            })
        },
        doDel: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Customerdepartgroup!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.flag == "success") {
                            that.toast(res.result);
                            that.getPageData('searchkehu');
                        } else if (res.flag = 'false') {
                            that.toast(res.result);
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            });
        }
    }
}
</script>
